<template>
<div>
  <el-tabs
    class="main"
    v-model="activeName" @tab-click="click">
    <el-tab-pane label="所有任务" name="AllTask" :data-change="dataChange">
      <AllTask :data-change="dataChange"/>
    </el-tab-pane>
    <el-tab-pane label="我发布的任务" name="MyCreateTask">
      <MyPublishTask :publish-change="publishChange" />
    </el-tab-pane>
    <el-tab-pane label="我被指派的任务" name="MyDesigneeId">
      <MyDesTask :des-change="desChange"/>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import AllTask from "./components/AllTask";
import MyPublishTask from "./components/MyPublishTask";
import MyDesTask from "./components/MyDesTask";
export default {
  name: "TaskList",
  components:{
    AllTask,
    MyPublishTask,
    MyDesTask
  },
  data(){
    return{
      activeName:'AllTask',
      dataChange: 0,
      publishChange: 0,
      desChange: 0,
    }
  },
  methods:{
    click(val){
      // 切换tab时标注重新加载数据
      if (val.index === "0"){
        this.dataChange += 1  //保证数据有变化
      }
      if (val.index === "1"){
        this.publishChange += 1  //保证数据有变化
      }
      if (val.index === "2"){
        this.desChange += 1 //保证数据有变化
      }
    },
    // remove(val){
    //   console.log(val)
    //   this.dataChange = false
    // }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>
